<template>
  <div class="home">
    <pageHeader :active="0" :bgColor="headerBg"></pageHeader>
    <div class="banner">
      <el-carousel :height="height">
        <el-carousel-item v-for="(item, index) in bannerList" :key="index">
          <div class="pr">
            <img :src="item.url" alt="" width="100%" />
          </div>
        </el-carousel-item>
      </el-carousel>
      <!--      <div class="search-box">
        <div class="flex">
          <i class="el-icon-search f22"></i>
          <el-input
            v-model="input"
            placeholder="您可以查找数据资源、数据服务、需求大厅"
            class="search-input"
          ></el-input>
          <el-button class="search-btn">搜索</el-button>
        </div>
        <div class="flex cDDEBFF mt25 f14">
          大家都在查：
          <div class="pl20 pointer">设备</div>
          <div class="pl20 pointer">生产</div>
          <div class="pl20 pointer">人员定位</div>
          <div class="pl20 pointer">三维服务</div>
        </div>
      </div> -->
      <div class="banner-bottom flex j-center cfff">
        <div class="mt20 mb20 pt10 pb10 pl50 pr50 br2">
          <i class="el-icon-document f36"></i>
          <div class="mt10">
            <span class="f20 mr10">{{ moduleList.length }}</span
            >项
          </div>
          <div class="mt10 f14">通用功能</div>
        </div>
        <div class="mt20 mb20 pt10 pb10 pl50 pr50 br2">
          <i class="el-icon-s-data f36"></i>
          <div class="mt10">
            <span class="f20 mr10">{{ openDataList.length }}</span
            >项
          </div>
          <div class="mt10 f14">开放数据</div>
        </div>
        <div class="mt20 mb20 pt10 pb10 pl50 pr50 br2">
          <i class="el-icon-office-building f36"></i>
          <div class="mt10">
            <span class="f20 mr10">{{ interFaceList }}</span
            >项
          </div>
          <div class="mt10 f14">数据接口</div>
        </div>
        <!-- <div class="mt20 mb20 pt10 pb10 pl50 pr50 br2">
					<i class="el-icon-office-building f36"></i>
					<div class="mt10"><span class="f20 mr10">4</span>个</div>
					<div class="mt10 f14">接入系统</div>
				</div>
				<div class="mt20 mb20 pt10 pb10 pl50 pr50 br2">
					<i class="el-icon-data-analysis f36"></i>
					<div class="mt10"><span class="f20 mr10">5</span>个</div>
					<div class="mt10 f14">数据主题</div>
				</div> -->
        <div class="mt20 mb20 pt10 pb10 pl50 pr50">
          <i class="el-icon-headset f36"></i>
          <div class="mt10">
            <span class="f20 mr10">{{ demand.length }}</span
            >个
          </div>
          <div class="mt10 f14">数据服务需求</div>
        </div>
        <div class="mt20 mb20 pt10 pb10 pl50 pr50">
          <i class="el-icon-box f36"></i>
          <div class="mt10">
            <span class="f20 mr10">{{ dataService.length }}</span
            >个
          </div>
          <div class="mt10 f14">数据服务供给</div>
        </div>
      </div>
    </div>
    <div class="provide">
      <div class="bg-provide"></div>
      <div class="title">
        <div class="en">PROVIDE</div>
        <div class="cn">E-base数字底座为您提供</div>
        <div class="line"></div>
      </div>

      <div class="flex j-center">
        <div class="card">
          <img src="../../assets/images/provide1.png" alt="" />
          <div class="f26 mt20">通用功能</div>
          <div class="f12 mt30 pl30 pr30 color666">
            为您提供各个应用场景下的典型功能模块，您可以组合使用您所需的通用功能
          </div>
        </div>
        <div class="card">
          <img src="../../assets/images/provide1.png" alt="" />
          <div class="f26 mt20">开放数据</div>
          <div class="f12 mt30 pl30 pr30 color666">
            您可以申请数据模型、数据内容、算法服务、解决方案等数据服务
          </div>
        </div>
        <div class="card">
          <img src="../../assets/images/provide1.png" alt="" />
          <div class="f26 mt20">开放平台</div>
          <div class="f12 mt30 pl30 pr30 color666">
            为您提供三维模型、工作流引擎等开发技术、接入指南和开发者文档
          </div>
        </div>
        <div class="card">
          <img src="../../assets/images/provide1.png" alt="" />
          <div class="f26 mt20">需求大厅</div>
          <div class="f12 mt30 pl30 pr30 color666">
            为您提供供需精准对接，您可以征集所需的数据资源、数据服务、数据应用
          </div>
        </div>
      </div>
    </div>
    <div class="dynamicCopy">
      <div class="title">
        <div class="en" style="color: rgba(256, 256, 256, 0.07)">
          CHARACTERISTICS
        </div>
        <div class="cn" style="color: #fff">功能特点</div>
        <div class="line"></div>
      </div>
      <div class="flex j-center">
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>全场景覆盖与全周期管理</p>
          </div>
          <div class="card_footer">
            面向全业务场景提供基础服务，涵盖关键的基础业务逻辑，有效解决不同场景下全周期下多变的业务需求
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>标准模块和定制开发结合</p>
          </div>
          <div class="card_footer">
            · 提炼共性服务形成标准化组件 <br />
            · 提供定制化开发的能力<br />
            · 灵活支撑不同场景的业务需求<br />
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>多源异构的数据整合能力</p>
          </div>
          <div class="card_footer">
            对多源异构数据进行集成和综合分析，形成多维度、高质量的数据资产，提供数据支持和决策支撑
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>丰富强大的底层技术支持</p>
          </div>
          <div class="card_footer">
            · 丰富的底层技术 <br />
            · 多种引擎支撑<br />
            · 持续的更新迭代和优化创新<br />
          </div>
        </div>
      </div>
    </div>
    <div class="dynamicCopyLight">
      <div class="title">
        <div class="en">APPLICATION VALUE</div>
        <div class="cn">应用价值</div>
        <div class="line"></div>
      </div>
      <div class="flex j-center">
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>快速交付和落地</p>
          </div>
          <div class="card_footer">
            内置70%标准化组件+30%的定制开发，支持企业单项目、多项目、项目组合等不同层次的管理需要，实现企业级平台的快速交付和落地
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>降低企业运营成本</p>
          </div>
          <div class="card_footer">
            统一规范和分布式服务，企业可根据自身需要按需选择相应的服务，并进行灵活组合和快速集成，从而降低企业的运营成本
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>管理模式的快速复制</p>
          </div>
          <div class="card_footer">
            · 统一的、全面的数字化业务 <br />
            · 应对不同场景、不同业务中的共性管理需求<br />
            · 轻松实现管理模式的复制<br />
          </div>
        </div>
        <div class="carder">
          <div class="card_header">
            <div style="font-weight: 700; color: #ff6f00; margin-right: 6px">
              》
            </div>
            <p>完善的业务功能</p>
          </div>
          <div class="card_footer">
            包含的业务模块能摸准企业业务需求的脉搏，有效解决企业当前最为迫切、最为现实的管理需要
          </div>
        </div>
      </div>
    </div>
    <div class="dynamic">
      <div class="title">
        <div class="en">DYNAMIC</div>
        <div class="cn">数据动态</div>
        <div class="line"></div>
      </div>
      <!-- <el-tabs v-model="active"> -->
      <!-- <el-tab-pane label="最新数据" name="1"> -->
      <div class="flex j-between">
        <div class="dynamic-column">
          <div class="dynamic-type">最新功能</div>
          <div
            class="dynamic-item"
            v-for="(item, index) in moduleList"
            :key="item.id"
            v-if="index < 5"
          >
            <p class="directory"><span></span>{{ item.name }}</p>
            <p class="date">{{ item.updateTime }}</p>
          </div>
        </div>
        <div class="dynamic-column">
          <div class="dynamic-type">最新数据</div>
          <div
            class="dynamic-item"
            v-for="(item, index) in openDataList"
            :key="item.id"
            v-if="index < 5"
          >
            <p class="directory"><span></span>{{ item.name }}</p>
            <p class="date">{{ item.updateTime }}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="overview">
      <div class="title">
        <div class="en">OVERVIEW</div>
        <div class="cn">数据概况</div>
        <div class="line"></div>
      </div>
      <div class="flex j-between">
        <div class="overview-left">
          <img src="../../assets/images/overview1.png" alt="" width="100%" />
          <div class="data">
            <p class="f28 mb10">{{ sceneList.length }}</p>
            <p class="f18 mb20">产品数量</p>
            <p class="line"></p>
          </div>
        </div>
        <div class="overview-right">
          <div class="flex j-between">
            <div class="w44 pr">
              <img
                src="../../assets/images/overview2.png"
                alt=""
                width="100%"
              />
              <div class="data">
                <p class="f28 mb10">{{ openDataList.length }}</p>
                <p class="f18 mb20">开放数据数量</p>
                <p class="line"></p>
              </div>
            </div>
            <div class="w54 pr">
              <img
                src="../../assets/images/overview3.png"
                alt=""
                width="100%"
              />
              <div class="data">
                <p class="f28 mb10">{{ interFaceList }}</p>
                <p class="f18 mb20">数据接口数量</p>
                <p class="line"></p>
              </div>
            </div>
          </div>
          <div class="pr">
            <img src="../../assets/images/overview4.png" alt="" width="100%" />
            <div class="data">
              <p class="f28 mb10">{{ moduleList.length }}</p>
              <p class="f18 mb20">通用功能数量</p>
              <p class="line"></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <pageFooter></pageFooter>
  </div>
</template>

<script>
import pageHeader from '@/components/pageHeader.vue'
import pageFooter from '@/components/pageFooter.vue'
import {
  getOpenData,
  getProductIntroduction,
  scene,
  getAllInterFaceData
} from '@/api/sceneProduct' //api接口
import { getPwDataDirectory } from '@/api/dataSource' //api接口
import { getPwDataService } from '@/api/dataService' //api接口
import { getPwDemandApply } from '@/api/openPlatform' //api接口
export default {
  name: 'Home',
  data() {
    return {
      bannerList: [
        // {
        //   url: require('@/assets/images/banner1.jpeg')
        // },
        // { url: require('@/assets/images/banner1.png') },
        {
          url: require('@/assets/images/banner2.jpeg')
        },
        // {
        //   url: require('@/assets/images/banner3.jpeg')
        // },
        // {
        //   url: require('@/assets/images/banner5.png')
        // },
        {
          url: require('@/assets/images/bannerNew.png')
        },
        {
          url: require('@/assets/images/banner6.png')
        },
        {
          url: require('@/assets/images/banner7.png')
        },
        {
          url: require('@/assets/images/banner8.png')
        }
      ],
      height: '',
      input: null,
      activeName: 'first',
      active: '1',
      infomationList: [
        {
          url: require('@/assets/images/infomation1.png')
        },
        {
          url: require('@/assets/images/infomation1.png')
        }
      ],
      headerBg: '',

      dataSource: [], //数据目录
      dataService: [], //数据服务
      demand: [], //需求大厅数据
      moduleList: [],
      openDataList: [],
      sceneList: [],
      interFaceList: 0
    }
  },
  components: {
    pageHeader,
    pageFooter
  },
  created() {
    this.height = this.calcHeight()

    this.getList()
  },
  mounted() {
    let that = this
    window.onresize = function windowResize() {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      that.height = that.calcHeight()
    }

    window.onscroll = function () {
      //为了保证兼容性，这里取两个值，哪个有值取哪一个
      //scrollTop就是触发滚轮事件时滚轮的高度
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 10) {
        that.headerBg = '#292c4d'
      } else {
        that.headerBg = ''
      }
    }
  },
  methods: {
    //获取列表数据
    getList() {
      // getPwDataDirectory({}).then((response) => {
      // 	console.log(response)
      // 	if (response.code == 0) {
      // 		this.dataSource = response.data
      // 	}
      // })
      getAllInterFaceData().then((res) => {
        this.interFaceList = res.data
      })
      scene().then(async (res) => {
        // console.log('场景',res.data)
        this.sceneList = res.data || []
      })
      getOpenData().then((res) => {
        if (res.code == 0) {
          this.openDataList = res.data
        }
      })
      getProductIntroduction().then((res) => {
        if (res.code == 0) {
          this.moduleList = res.data
        }
      })

      getPwDataService({}).then((response) => {
        // console.log(response)
        if (response.code == 0) {
          this.dataService = response.data
        }
      })

      getPwDemandApply({}).then((response) => {
        // console.log(response)
        if (response.code == 0) {
          this.demand = response.data
        }
      })
    },

    calcHeight() {
      let w = window.innerWidth
      let h = (750 / 1920) * w
      if (w > 1200) {
        return h + 'px'
      } else {
        return '469px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  .banner {
    position: relative;

    .search-box {
      background-color: rgba(6, 28, 67, 0.7);
      border: 1px solid rgba(114, 153, 214, 0.7);
      height: 110px;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 100;
      padding: 15px;
      width: 40%;
      min-width: 600px;

      .el-icon-search {
        position: absolute;
        top: 29px;
        left: 24px;
        color: #409eff;
        z-index: 1;
      }

      .search-input {
        width: 100%;

        ::v-deep .el-input__inner {
          padding: 0 100px 0 40px;
          height: 50px;
        }
      }

      .search-btn {
        position: absolute;
        top: 20px;
        right: 24px;
        padding: 12px 20px;
        background: rgb(232, 140, 41);
        color: #fff;
      }
    }

    .banner-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 150px;
      background: url('../../assets/images/banner-bg.png') no-repeat;
      background-size: 100% 100%;
      z-index: 101;
    }
  }

  .br2 {
    border-right: 2px solid rgba(255, 255, 255, 0.2);
  }

  .title {
    height: 140px;
    padding-top: 70px;

    .en {
      font-size: 60px;
      font-family: sans-serif;
      color: rgba(58, 58, 58, 0.07);
      height: 60px;
    }

    .cn {
      color: rgb(51, 51, 51);
      font-size: 30px;
      height: 50px;
      margin-top: -40px;
    }

    .line {
      width: 50px;
      height: 4px;
      background: rgb(10, 108, 255);
      margin: 0 auto;
      border-radius: 2px;
    }
  }

  .provide {
    position: relative;

    .bg-provide {
      background: rgb(230, 237, 250);
      height: 400px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: -1;
    }

    .card {
      width: 250px;
      height: 325px;
      cursor: pointer;
      background: #fff url('../../assets/images/provide-bg.png') center 20px
        no-repeat;
      box-shadow: rgb(0 0 0 / 10%) 4px 4px 16px;
      margin-right: 40px;
      border: 1px solid #fff;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        border-color: #0a6cff;
      }
    }
  }

  .cut-line {
    width: 40px;
    background: #213c7a;

    .cut-arrow {
      background: #fff;
      border: 20px solid transparent;
      border-left-color: rgba(10, 108, 255, 0.25);
      border-bottom-color: rgba(10, 108, 255, 0.25);
    }
  }
  .dynamicCopyLight {
    width: 100%;
    height: 680px;
    margin: 0 auto;
    // background: url('../../assets/images/backImg/bakbiggg.png');
    background-size: 100% 100%;
    .carder {
      width: 298px;
      height: 326px;
      perspective: 1000px;
      border: 2px solid #6c69a8;
      border-radius: 8px;
      margin: 0 10px;

      background: url('../../assets/images/backImg/cardBack.png') no-repeat;
      // background: url('../../assets/images/backImg/cardBack3.png');
      background-size: 130% 180px;
      background-position: bottom;
      opacity: 0.7;
      .card_header {
        display: flex;
        justify-content: start;
        align-items: center;
        color: #000000;
        opacity: 1;
        font-size: 18px;
        font-weight: 600;
        margin: 20px 8px;
      }
      .card_footer {
        color: #2c2c2c;
        opacity: 1;
        font-size: 15px;
        margin: 38px;
        text-align: left;
        font-weight: 100;
        line-height: 1.5;
      }
      // box-shadow: rgb(0 0 0 / 10%) 4px 4px 16px;
    }
  }
  .dynamicCopy {
    width: 100%;
    height: 680px;
    margin: 0 auto;
    background: url('../../assets/images/backImg/bakbiggg.png');
    background-size: 100% 100%;
  }
  .dynamic {
    width: 1200px;
    margin: 0 auto;

    ::v-deep .el-tabs__item {
      color: rgba(51, 51, 51, 0.5);
      font-size: 22px;
      height: 50px;
      line-height: 50px;
    }

    ::v-deep .el-tabs__active-bar {
      height: 4px;
      background-color: #0a6cff;
    }

    ::v-deep .el-tabs__content {
      box-shadow: #d6e1f2 4px 4px 16px;
      background: #fff;
      padding: 10px 20px 20px;
      margin-top: 30px;
    }

    ::v-deep .el-tabs__item.is-active {
      color: #777;
    }

    .dynamic-column {
      width: 48%;
    }

    .dynamic-type {
      font-size: 18px;
      font-weight: 600;
      border-bottom: 2px solid #0a6cff;
      text-align: left;
      width: 120px;
      padding: 10px 5px;
      margin-bottom: 15px;
    }

    .dynamic-item {
      border-bottom: 1px dotted #d6e1f2;
      text-align: left;
      padding-top: 15px;

      .directory {
        font-size: 16px;
        display: flex;
        align-items: center;
        cursor: pointer;

        span {
          width: 5px;
          height: 5px;
          margin-right: 8px;
          display: inline-block;
          border-radius: 50%;
          background: #0a6cff;
        }

        &:hover {
          color: #0a6cff;
        }
      }

      .date {
        margin-top: 8px;
        margin-left: 13px;
        color: #4b4f60;
        margin-bottom: 8px;
      }
    }
  }

  .overview {
    width: 1200px;
    margin: 0 auto;

    .overview-left {
      width: 32.7%;
      position: relative;
    }

    .data {
      position: absolute;
      right: 20px;
      bottom: 30px;
      color: #fff;
      text-align: right;

      .line {
        width: 30px;
        height: 3px;
        background: #fff;
        display: flex;
        position: absolute;
        right: 0;
      }
    }

    .overview-right {
      width: 65.4%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .w44 {
        width: 43%;
      }

      .w54 {
        width: 53.8%;
      }
    }
  }
}
.carder {
  width: 298px;
  height: 326px;
  perspective: 1000px;
  border: 2px solid #6c69a8;
  border-radius: 8px;
  margin: 0 10px;

  background: url('../../assets/images/backImg/cardBack.png') no-repeat;
  // background: url('../../assets/images/backImg/cardBack3.png');
  background-size: 130% 180px;
  background-position: bottom;
  opacity: 0.7;
  .card_header {
    display: flex;
    justify-content: start;
    align-items: center;
    color: #fff;
    opacity: 1;
    font-size: 18px;
    font-weight: 600;
    margin: 20px 8px;
  }
  .card_footer {
    color: #fff;
    opacity: 1;
    font-size: 15px;
    margin: 38px;
    text-align: left;
    font-weight: 100;
    line-height: 1.5;
  }
  // box-shadow: rgb(0 0 0 / 10%) 4px 4px 16px;
}

.card-front {
  // background-color: rgba($color: #71A2F2, $alpha: 1);
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  // border: 10px solid rgba($color: #3682E7, $alpha: 0.5);
  border-radius: 10px;
  justify-content: start;
  font-size: 14px;
}

// .card-back {
//   // background-color: rgba($color: #c3e1ff, $alpha: 0.5);
//   background: url('../../../public/img/background1.jpg') no-repeat;
//   color: #424040;
//   display: flex;
//   align-items: center;
//   // border: 10px solid #f08a5d;
//   padding: 5px;
//   border-radius: 10px;
//   justify-content: center;
//   line-height: 30px;
//   font-size: 20px;
//   transform: rotateY(180deg);
// }
</style>
